<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" height="auto" width="40%" @cancel="handCancel">
    <BasicForm @register="registerForm"> </BasicForm>
    <div v-if="showData.show">
      <div style="width: 150px; text-align: right; float: left">主题配置:</div>
      <a-button type="primary" @click="handleAdd" style="float: right; margin-right: 100px">添加主题</a-button>
    </div>
    <div v-if="showData.show" style="margin-top: 45px">
      <!--引用表格-->
      <BasicTable @register="registerTable" :rowSelection="rowSelection">
        <!--插槽:table标题-->
        <template #tableTitle>
          <a-dropdown v-if="checkedKeys.length > 0">
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="batchHandleDelete">
                  <Icon icon="ant-design:delete-outlined"></Icon>
                  删除
                </a-menu-item>
              </a-menu>
            </template>
            <a-button
              >批量操作
              <Icon icon="mdi:chevron-down"></Icon>
            </a-button>
          </a-dropdown>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
          <!--  :dropDownActions="getDropDownAction(record)" -->
          <TableAction :actions="getTableAction(record)" />
        </template>
      </BasicTable>

      <!-- 表单区域 -->
      <OperationThemeModal @register="registerModals" @success="handleSuccess"></OperationThemeModal>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema, showData } from '../OperationAccess.data';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns } from '../OperationTheme.data';
import { saveOrUpdate } from '../OperationAccess.api';
import OperationThemeModal from '../modules/OperationThemeModal.vue';
import { getOperationAccessTopic, getOperationAccessTopicDeleteBatchDelete, getOperationAccessTopicDeleteOne } from '../OperationTheme.api';
import { useModal } from '/@/components/Modal';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
//注册model
const [registerModals, { openModal }] = useModal();
// Emits声明
const emit = defineEmits(['register', 'success']);
const isUpdate = ref(true);
const datas = reactive({
  accessId: null,
  show: false,
});
console.log(88888);
console.log(showData.show);

const checkedKeys = ref<Array<string | number>>([]);

//表单配置
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  labelWidth: 150,
  schemas: formSchema,
  showActionButtonGroup: false,
});
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //重置表单
  if (data.record.networkId == 1) {
    showData.show = false;
  } else {
    showData.show = true;
  }
  await resetFields();
  setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
  isUpdate.value = !!data?.isUpdate;
  if (unref(isUpdate)) {
    //表单赋值
    await setFieldsValue({
      ...data.record,
    });
    Object.assign(datas, data.record);
  }
});
//设置标题
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
//表单提交事件
async function handleSubmit(v) {
  try {
    let values = await validate();
    setModalProps({ confirmLoading: true });
    //提交表单
    console.log(4444444);
    console.log(values);
    
    if(values.protocolId == undefined) {
        values.protocolId = 0
    }
    await saveOrUpdate(values, isUpdate.value);
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('success', { isUpdate: isUpdate.value, values });
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
async function handCancel(v) {
  datas.isEdit = false;
  await setFieldsValue({
    ...datas,
  });
}

//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    title: '主题配置表',
    api: getOperationAccessTopic,
    columns,
    canResize: false,
    formConfig: {
      labelWidth: 120,
      autoSubmitOnEnter: false,
      showAdvancedButton: true,
    },
    useSearchForm: false, //关闭搜索条件
    showTableSetting: false, //设置
    actionColumn: {
      width: 120,
    },
    rowKey: 'topicId',
  },
});

const [registerTable, { reload }, { selectedRowKeys }] = tableContext;

/**
 * 选择列配置
 */
const rowSelection = {
  type: 'checkbox',
  columnWidth: 30,
  selectedRowKeys: checkedKeys,
  onChange: onSelectChange,
};

/**
 * 选择事件
 */
function onSelectChange(selectedRowKeys: (string | number)[]) {
  checkedKeys.value = selectedRowKeys;
}

/**
 * 新增事件
 */
function handleAdd() {
  openModal(true, {
    isUpdate: false,
    showFooter: true,
  });
}
/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
  record.isEdit = false;
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}
/**
 * 详情
 */
function handleDetail(record: Recordable) {
  record.isEdit = true;
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: false,
  });
}
/**
 * 删除事件
 */
async function handleDelete(record) {
  await getOperationAccessTopicDeleteOne({ id: record.accessId }, reload);
}
/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  await getOperationAccessTopicDeleteBatchDelete({ ids: checkedKeys.value }, reload);
}
/**
 * 成功回调
 */
function handleSuccess({ isUpdate, values }) {
  reload();
}
/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
    },
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
  return [
    {
      label: '详情',
      onClick: handleDetail.bind(null, record),
    },
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>

<style lang="less" scoped>
</style>
